<template>
  <div class="bu-box">
    <el-form ref="addBookForm" :model="addBookForm" :rules="rules" label-width="80px">
      <el-form-item label="书籍编号" prop="bookNo">
        <el-input v-model="addBookForm.bookNo" clearable></el-input>
      </el-form-item>
      <el-form-item label="书籍名称" prop="bookName">
        <el-input v-model="addBookForm.bookName" clearable></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="bookAuthor">
        <el-input v-model="addBookForm.bookAuthor" clearable></el-input>
      </el-form-item>
      <el-form-item label="书籍类型" prop="typeId">
        <el-select v-model="addBookForm.typeId" placeholder="请选择书籍类型">
          <el-option
            v-for="item,index in bookTypes"
            :key="index"
            :label="item.typeName"
            :value="item.typeId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="书籍封面" prop="bookAvatar">
        <input type="file" @change="onFileChange" />
        <img v-if="imageSrc" width="100px" height="100px" :src="imageSrc" alt="预览" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('addBookForm')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  data(){
    return {
      addBookForm: {
        "bookNo": '',
        "bookName": '',
        "bookAuthor": '',
        "bookAvatar": '',
        "typeId": ''
      },
      rules: {
        bookNo: [
          { required: true, message: '请输入书籍编号', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        bookName: [
          { required: true, message: '请输入书籍名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        bookAuthor: [
          { required: true, message: '请输入书籍作者', trigger: 'blur' }
        ],
        typeId: [
          { required: true, message: '请选择书籍类型', trigger: 'change' }
        ]
        // bookAvatar: [
        //   { required: true, message: '请选择书籍封面', trigger: 'change' }
        // ]
      },
      imageSrc: '',
      bookTypes: []
    }
  },
  created(){
    this.queryBookTypeList()
  },
  methods: {
    onFileChange(event) {
      this.addBookForm.bookAvatar = event.target.files[0]
      if (this.addBookForm.bookAvatar) {
        this.imageSrc = URL.createObjectURL(this.addBookForm.bookAvatar)
      }
    },
    onSubmit(bookFrom){
      this.$refs[bookFrom].validate(async (valid) => {
        if (valid) {
          if (!this.addBookForm.bookAvatar) {
            this.$message.warning("请选择一张图片作为书籍封面")
            return;
          }

          const formData = new FormData()
          formData.append('bookAvatar', this.addBookForm.bookAvatar)
          formData.append('bookNo', this.addBookForm.bookNo)
          formData.append('bookName', this.addBookForm.bookName)
          formData.append('bookAuthor', this.addBookForm.bookAuthor)
          formData.append('typeId', this.addBookForm.typeId)
          try {
            const response = await this.$http.post('/book/uploadBook', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            });
            if(response.success && response.code === 200){
              this.$message.success(response.msg || '上传成功')
              this.addBookForm = {}
              this.imageSrc = ''
            }
          } catch (error) {
            this.$message.success('上传失败：', error)
          }
        } else {
          return false
        }
      })
    },
    queryBookTypeList(){
      const queryBookTypeForm = {
        "isPage": false
      }
      this.$http.post('/type/queryBookTypes', queryBookTypeForm).then(res => {
        if (res.data){
          this.bookTypes = res.data
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
